{% extends "base.html.twig" %}
{% block title %}Home
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="styles/travel_site.css">
	{{ parent() }}
{% endblock %}

{% block content %}

	<div class="parallax-1">
		<div class="caption">
			<span class="border">Are You Ready To..</span>
		</div>
	</div>

	<section id="section p-5">
		<div class="container p-3 mt-5 mb-5 bg-light rounded-pill shadow-sm">
			<h2 id="h2_choose">About us</h2>
			<div id="choose_text">
				<p>
					Elysium Escapes was founded by a small group of avid travlers who found themselves always wanting a more refined experience. Sometimes, when we have the means, we just want to have the very best the world has to offer. Most travel sites cater to the cheapest option possible. At Elysium Escapes, we know you have resources to spare and we intend to deliver the most exclusive experience that your hard pillaged money can buy. To find out more and to hear accounts from our happy travelers, Check out our
					<strong>Tales from Elysium</strong>
					travel journals:
				</p>
			</div>
			<div class="logInButtonBox w-100 text-center">
				<a class="btn logInButton" href="https://travel.fsd01.ca/blog">Tales from Elysium</a>
			</div>
		</div>
	</section>

	<div class="parallax-2"></div>

	<section class="section p-5">
		<div class="container p-3 mt-5 mb-5 bg-light rounded-pill shadow-sm">
			<div class="d-flex justify-content-center row g-3 align-items-center text-center  mt-5 mb-5">
				<h2 id="h2_Destinations">Explore our Destination</h2>
				<div class="col-auto">
					<div class="input-group">
						{% for destination in destinations %}
							<div class="col-auto mx-auto mb-5">
								<h3 class="text-center">{{destination.destination_name}}</h3>
								<a class="btn" href="https://travel.fsd01.ca/destinations#{{destination.id}}">
									<img class="imgButton" src="{{destination.destination_imagepath}}" height="200" width="200" alt="{{destination.destination_name}} image" title="{{destination.destination_name}} image"/>
								</a>
							</div>

						{% endfor %}
					</div>
				</div>
			</div>
		</div>

	</section>

	<div class="parallax-3"></div>

	<section id="section p-5">
		<div class="container p-3 mt-5 mb-5 bg-light rounded-pill shadow-sm">
			<h2>Book Your Experience</h2>
			<div id="book_wrapper">
				<div class="destination_image_box">
					<a class="btn" href="https://travel.fsd01.ca/testbooking">
						<img class="imgButton destination_image rounded-pill img-fluid" src="images/destination_tropical.jpg" alt="Bridge to Tropical" title="Bridge to Tropical"/>
					</a>
				</div>
			</div>
		</div>
	</section>


	<div class="parallax-1">
		<div class="caption">
			<span class="border">...Escape</span>
		</div>
	</div>
{% endblock %}
